<!--
 * @Author: Bennent_G
 * @Date: 2024-12-26 15:59:19
 * @LastEditTime: 2025-03-25 18:33:24
 * @Description:
-->
<template>
	<div>
		<el-dialog v-model="locaVisible" v-bind="$attrs" width="800px">
			<template #footer>
				<el-button key="back" @click="close">取消</el-button>
				<el-button key="submit" type="primary" :loading="loading" @click="handleSubmit">确定</el-button>
			</template>
			<el-form ref="formRef" :model="form">
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item label="用户昵称" name="nickName" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }"
							:rules="[{ required: true, message: '请输入昵称!' }]">
							<el-input v-model:value="form.nickName" placeholder="请输入昵称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="用户性别" name="sex" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
							<el-radio-group v-model:value="form.sex" name="radioGroup">
								<el-radio :value="1">男</el-radio>
								<el-radio :value="1">女</el-radio>
								<el-radio :value="0">保密</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item label="手机号" name="mobile" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }"
							:rules="[{ required: true, message: '请输入手机号!' }]">
							<el-input v-model:value="form.mobile" placeholder="请输入手机号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="用户状态" name="status" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
							<el-radio-group v-model:value="form.status" name="radioGroup">
								<el-radio :value="1">正常</el-radio>
								<el-radio :value="0">禁用</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item label="所属部门" name="dept" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }"
							:rules="[{ required: true, message: '请输入!' }]">
							<el-tree-select v-model:value="form.dept" :tree-data="treeDatas"
								:field-names="{ label: 'title', value: 'key', children: 'children' }" show-search
								tree-node-filter-prop="title" allow-clear tree-default-expand-all placeholder="请选择部门">
							</el-tree-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="所属角色" name="role" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
							<el-select v-model:value="form.role" placeholder="请选择">
								<el-option :value="1">超级管理员</el-option>
								<el-option :value="2">超级管理员</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item label="用户头像" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
							<el-upload :maxCount="1" :show-upload-list="{ showPreviewIcon: false, showRemoveIcon: true }"
								accept="image/*" name="avatar" list-type="picture-card" class="avatar-uploader"
								:before-upload="beforeUpload" @change="handleChange">
								<div>
									<plus-outlined />
									<div style="margin-top: 8px">上传</div>
								</div>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { computed, defineComponent, ref, reactive, onMounted, watch } from 'vue';
import type { AnyObject } from "@/views/global";
import useNotificationHook from '@/hooks/common/useNotificationHook';

defineComponent({ name: 'DeptUserModal' });
const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false
	},
	id: {
		type: [Number, String],
		default: 0
	}
});
const emits = defineEmits(['update:modelValue']);
const locaVisible = computed({
	get() {
		return props.modelValue;
	},
	set(val) {
		emits('update:modelValue', val);
	}
});

const { openNotifation } = useNotificationHook();

// 表单
const formRef = ref();
const loading = ref<boolean>(false);
const form = reactive<AnyObject>({
	nickName: '',
	sex: 0,
	mobile: '',
	status: 1,
	dept: null,
	role: null,
	avatar: '',
});
const handleSubmit = () => {
	loading.value = true;
	formRef.value.validate((valid) => {
		if (valid) {
			console.log('submit!');
			// #TODO: 提交表单
			openNotifation({ type: 'success', message: '提交成功' });
			close();
		}
		loading.value = false;
		reset();
	});
};
const reset = () => {
	formRef.value.resetFields();
};

// 编辑模式
const getDeptUserInfo = () => {
	// #TODO: 获取部门用户信息
	console.log('getDeptUserInfo', props.id);
};
watch(
	() => props.id,
	(newValue, oldValue) => {
		if(newValue && newValue !== oldValue) {
			getDeptUserInfo();
		}
	}
);

// tree-select初始化
const treeDatas = ref<typeof TreeSelectProps['treeData']>([]);
const getDeptTree = () => {
	// #TODO: 获取部门树结构
	treeDatas.value = [
		{
			title: '董事办',
			key: '0-0',
			children: [
				{
					title: '秘书办',
					key: '0-0-0',
					isLeaf: true,
				},
				{
					title: '董事会',
					key: '0-0-1',
					isLeaf: true,
				},
			],
		},
		{
			title: '研发中心',
			key: '0-1',
			children: [
				{
					title: '内容发行',
					key: '0-1-0',
					isLeaf: true,
				},
				{
					title: '项目应用',
					key: '0-1-1',
					isLeaf: true,
				},
			],
		},
	];
};
onMounted(() => {
	getDeptTree();
});

// 上传图片
const beforeUpload = () => {
	return false;
};
const handleChange = (info: typeof UploadChangeParam) => {
	const { file } = info;
	console.log('file', file);
	// #TODO: 上传图片同时绑定头像image
};

// 关闭弹框
const close = () => {
	locaVisible.value = false;
	reset();
};

</script>

<style scoped lang="scss">
.ant-input-number {
	width: 100%;
}
</style>
